<template>
  <div class="app-container">
    <div class="top-bar-container">
      <el-row>
        <div class="search-container">
          <search-form @search-submit="getProductList">
            <search-input v-model="listQuery.name" placeholder="产品名称" />
          </search-form>
        </div>
      </el-row>
    </div>

    <el-table v-loading="listLoading" :data="list" border fit stripe highlight-current-row>
      <el-table-column align="center" label="ID" prop="id" />

      <el-table-column align="center" label="产品名称" prop="name" />

      <el-table-column align="center" label="产品简称" prop="shortName" />

      <el-table-column align="center" label="生产企业" prop="enterpriseName" />

      <el-table-column align="center" label="产品介绍" prop="description">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="light" :content="scope.row.description" placement="top-end">
            <span class="one-txt-cut">{{ scope.row.description }}</span>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column align="center" label="状态" prop="status">
        <template slot-scope="scope">{{ scope.row.status | enableStatusFilter }}</template>
      </el-table-column>

      <el-table-column
        align="center"
        fixed="right"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button-group>
            <el-button
              type="warning"
              size="mini"
              icon="el-icon-edit"
              title="选择"
              @click="handleSelect(scope.row)"
            >选择
            </el-button>
          </el-button-group>
        </template>
      </el-table-column>

    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getProductList"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import SearchForm from '@/components/SearchForm'
import SearchInput from '@/components/SearchForm/SearchInput'
import { enableStatusList } from '@/utils/dict'
import { searchProductList } from '@/api/rest/product'

export default {
  name: 'InProductList',
  components: { SearchInput, Pagination, SearchForm },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        id: null,
        name: null,
        page: 1,
        limit: 10
      },
      enableStatusList: enableStatusList
    }
  },
  computed: {},
  watch: {
  },
  created() {
    this.getProductList()
  },
  methods: {
    getProductList() {
      this.listLoading = true
      searchProductList(this.listQuery).then(response => {
        this.list = response.data.items
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleSelect(row) {
      this.$emit('selected', row)
    }
  }
}
</script>
<style scoped>

.one-txt-cut{
  overflow: hidden;
  /*white-space: nowrap;*/
  -webkit-line-clamp: 5;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
</style>

